﻿<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

    <!-- Morris -->
    <link href="css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <span class="label label-info pull-left " style="font-size:17px;">今日</span>
                    </div>
                    <div class="ibox-content">
                        <table class="table border-bottom table-hover" id="daySts">
                            <tbody>
                            <tr>
                                <td class="no-top-border font-bold">登录人数</td>
                                <td class="no-top-border" ></td>
                                <td class="text-navy no-top-border"> <i class="fa fa-level-up"></i> - </td>
                                <td class="no-top-border">-</td>
                            </tr>
                            <tr>
                                <td class="font-bold">登录人次</td>
                                <td><span class="pie"></span></td>
                                <td class="text-warning"> <i class="fa fa-level-down"></i> - </td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td class="font-bold">活跃度</td>
                                <td><span class="pie"></span></td>
                                <td class="text-navy"> <i class="fa fa-level-up"></i> - </td>
                                <td>-</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">上月</span>
                        <span class="label label-info pull-left"  style="font-size:17px;">本月</span>
                    </div>
                    <div class="ibox-content">
                        <table class="table border-bottom table-hover"  id="monthSts">
                            <tbody>
                            <tr>
                                <td class="no-top-border font-bold">登录人数</td>
                                <td class="no-top-border"><span class="pie"></span></td>
                                <td class="text-navy no-top-border"> <i class="fa fa-level-up"></i> - </td>
                                <td class="no-top-border">-</td>
                            </tr>
                            <tr>
                                <td class="font-bold">登录人次</td>
                                <td><span class="pie"></span></td>
                                <td class="text-warning"> <i class="fa fa-level-down"></i> - </td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td class="font-bold">活跃度</td>
                                <td><span class="pie"></span></td>
                                <td class="text-navy"> <i class="fa fa-level-up"></i> - </td>
                                <td>-</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>近30天系统登录人数，人次，活跃度</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="flot-chart">
                                    <div class="flot-chart-content" id="stsUserBehaviorChart">


				    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>消息</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content ibox-heading">
                        <h3><i class="fa fa-envelope-o"></i> 新消息</h3>
                        <small><i class="fa fa-tim"></i> 您有22条未读消息</small>
                    </div>
                    <div class="ibox-content">
                        <div class="feed-activity-list">

                            <div class="feed-element">
                                <div>
                                    <small class="pull-right text-navy">1月前</small>
                                    <strong>井幽幽</strong>
                                    <div>有人说：“一辈子很长，要跟一个有趣的人在一起”。我想关注我的人，应该是那种喜欢找乐子也乐意分享乐趣的人，你们一定挺优秀的。所以单身的应该在这条留言，互相勾搭一下。特别有钱人又帅可以直接私信我！</div>
                                    <small class="text-muted">4月11日 00:00</small>
                                </div>
                            </div>

                            <div class="feed-element">
                                <div>
                                    <small class="pull-right">2月前</small>
                                    <strong>马伯庸 </strong>
                                    <div>又方便，又防水，手感又好，还可以用手机遥控。简直是拍戏利器，由其是跟老师们搭戏的时候…想想还有点小激动啊，嘿嘿。</div>
                                    <small class="text-muted">11月8日 20:08 </small>
                                </div>
                            </div>

                            <div class="feed-element">
                                <div>
                                    <small class="pull-right">5月前</small>
                                    <strong>芒果宓 </strong>
                                    <div>一个完整的梦。</div>
                                    <small class="text-muted">11月8日 20:08 </small>
                                </div>
                            </div>

                            <div class="feed-element">
                                <div>
                                    <small class="pull-right">5月前</small>
                                    <strong>刺猬尼克索</strong>
                                    <div>哈哈哈哈 你卖什么萌啊! 蠢死了</div>
                                    <small class="text-muted">11月8日 20:08 </small>
                                </div>
                            </div>


                            <div class="feed-element">
                                <div>
                                    <small class="pull-right">5月前</small>
                                    <strong>老刀99</strong>
                                    <div>昨天评论里你见过最“温暖和感人”的诗句，整理其中经典100首，值得你收下学习。</div>
                                    <small class="text-muted">11月8日 20:08 </small>
                                </div>
                            </div>
                            <div class="feed-element">
                                <div>
                                    <small class="pull-right">5月前</small>
                                    <strong>娱乐小主 </strong>
                                    <div>你是否想过记录自己的梦？你是否想过有自己的一个记梦本？小时候写日记，没得写了就写昨晚的梦，后来变成了习惯………翻了一晚上自己做过的梦，想哭，想笑…</div>
                                    <small class="text-muted">11月8日 20:08 </small>
                                </div>
                            </div>
                            <div class="feed-element">
                                <div>
                                    <small class="pull-right">5月前</small>
                                    <strong>DMG电影 </strong>
                                    <div>《和外国男票乘地铁，被中国大妈骂不要脸》妹子实在委屈到不行，中国妹子找外国男友很令人不能接受吗？大家都来说说自己的看法</div>
                                    <small class="text-muted">11月8日 20:08 </small>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-8">

                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>用户项目列表</h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <table class="table table-hover no-margins">
                                    <thead>
                                        <tr>
                                            <th>状态</th>
                                            <th>日期</th>
                                            <th>用户</th>
                                            <th>值</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><small>进行中...</small>
                                            </td>
                                            <td><i class="fa fa-clock-o"></i> 11:20</td>
                                            <td>青衣5858</td>
                                            <td class="text-navy"> <i class="fa fa-level-up"></i> 24%</td>
                                        </tr>
                                        <tr>
                                            <td><span class="label label-warning">已取消</span>
                                            </td>
                                            <td><i class="fa fa-clock-o"></i> 10:40</td>
                                            <td>徐子崴</td>
                                            <td class="text-navy"> <i class="fa fa-level-up"></i> 66%</td>
                                        </tr>
                                        <tr>
                                            <td><small>进行中...</small>
                                            </td>
                                            <td><i class="fa fa-clock-o"></i> 01:30</td>
                                            <td>姜岚昕</td>
                                            <td class="text-navy"> <i class="fa fa-level-up"></i> 54%</td>
                                        </tr>
                                        <tr>
                                            <td><small>进行中...</small>
                                            </td>
                                            <td><i class="fa fa-clock-o"></i> 02:20</td>
                                            <td>武汉大兵哥</td>
                                            <td class="text-navy"> <i class="fa fa-level-up"></i> 12%</td>
                                        </tr>
                                        <tr>
                                            <td><small>进行中...</small>
                                            </td>
                                            <td><i class="fa fa-clock-o"></i> 09:40</td>
                                            <td>荆莹儿</td>
                                            <td class="text-navy"> <i class="fa fa-level-up"></i> 22%</td>
                                        </tr>
                                        <tr>
                                            <td><span class="label label-primary">已完成</span>
                                            </td>
                                            <td><i class="fa fa-clock-o"></i> 04:10</td>
                                            <td>栾某某</td>
                                            <td class="text-navy"> <i class="fa fa-level-up"></i> 66%</td>
                                        </tr>
                                        <tr>
                                            <td><small>进行中...</small>
                                            </td>
                                            <td><i class="fa fa-clock-o"></i> 12:08</td>
                                            <td>范范范二妮</td>
                                            <td class="text-navy"> <i class="fa fa-level-up"></i> 23%</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>任务列表</h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <ul class="todo-list m-t small-list ui-sortable">
                                    <li>
                                        <a href="widgets.html#" class="check-link"><i class="fa fa-check-square"></i> </a>
                                        <span class="m-l-xs todo-completed">开会</span>

                                    </li>
                                    <li>
                                        <a href="widgets.html#" class="check-link"><i class="fa fa-check-square"></i> </a>
                                        <span class="m-l-xs  todo-completed">项目开发</span>

                                    </li>
                                    <li>
                                        <a href="widgets.html#" class="check-link"><i class="fa fa-square-o"></i> </a>
                                        <span class="m-l-xs">修改bug</span>
                                        <small class="label label-primary"><i class="fa fa-clock-o"></i> 1小时</small>
                                    </li>
                                    <li>
                                        <a href="widgets.html#" class="check-link"><i class="fa fa-square-o"></i> </a>
                                        <span class="m-l-xs">修改bug</span>
                                        <small class="label label-primary"><i class="fa fa-clock-o"></i> 1小时</small>
                                    </li>
                                    <li>
                                        <a href="widgets.html#" class="check-link"><i class="fa fa-square-o"></i> </a>
                                        <span class="m-l-xs">修改bug</span>
                                        <small class="label label-primary"><i class="fa fa-clock-o"></i> 1小时</small>
                                    </li>
                                    <li>
                                        <a href="widgets.html#" class="check-link"><i class="fa fa-square-o"></i> </a>
                                        <span class="m-l-xs">修改bug</span>
                                        <small class="label label-primary"><i class="fa fa-clock-o"></i> 1小时</small>
                                    </li>
                                    <li>
                                        <a href="widgets.html#" class="check-link"><i class="fa fa-square-o"></i> </a>
                                        <span class="m-l-xs">修改bug</span>
                                        <small class="label label-primary"><i class="fa fa-clock-o"></i> 1小时</small>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>交易地区</h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">

                                <div class="row">
                                    <div class="col-sm-6">
                                        <table class="table table-hover margin bottom">
                                            <thead>
                                                <tr>
                                                    <th style="width: 1%" class="text-center">序号</th>
                                                    <th>交易</th>
                                                    <th class="text-center">日期</th>
                                                    <th class="text-center">销售额</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="text-center">1</td>
                                                    <td>防盗门
                                                        </small>
                                                    </td>
                                                    <td class="text-center small">2014.9.15</td>
                                                    <td class="text-center"><span class="label label-primary">&yen;483.00</span>
                                                    </td>

                                                </tr>
                                                <tr>
                                                    <td class="text-center">2</td>
                                                    <td>衣柜
                                                    </td>
                                                    <td class="text-center small">2014.9.15</td>
                                                    <td class="text-center"><span class="label label-primary">&yen;327.00</span>
                                                    </td>

                                                </tr>
                                                <tr>
                                                    <td class="text-center">3</td>
                                                    <td>防盗门
                                                    </td>
                                                    <td class="text-center small">2014.9.15</td>
                                                    <td class="text-center"><span class="label label-warning">&yen;125.00</span>
                                                    </td>

                                                </tr>
                                                <tr>
                                                    <td class="text-center">4</td>
                                                    <td>橱柜</td>
                                                    <td class="text-center small">2014.9.15</td>
                                                    <td class="text-center"><span class="label label-primary">&yen;344.00</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center">5</td>
                                                    <td>手机</td>
                                                    <td class="text-center small">2014.9.15</td>
                                                    <td class="text-center"><span class="label label-primary">&yen;235.00</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center">6</td>
                                                    <td>显示器</td>
                                                    <td class="text-center small">2014.9.15</td>
                                                    <td class="text-center"><span class="label label-primary">&yen;100.00</span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-sm-6">
                                        <div id="world-map" style="height: 300px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.5"></script>
    <script src="js/plugins/flot/jquery.flot.js"></script>
    <script src="js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="js/plugins/peity/jquery.peity.min.js"></script>
    <script src="js/content.min.js?v=1.0.0"></script>
    <script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="js/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="js/plugins/toastr/toastr.min.js"></script>
    <script type="text/javascript" src="js/custom/tools.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/custom/app.js" charset="UTF-8"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highcharts/9.1.2/highcharts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/highcharts/9.1.2/modules/exporting.min.js"></script>
</body>
    <script>
        $(function(){
	    initUserBehavior();
	    initUser30DayBehavior();
	})
	function initUserBehavior(){
            var url = 'userBehavior/getStsUserBehavior';
            jQuery.ajax({
                url:domain + url,
                type:"get",
                data:{},
                crossDomain:true,
                async:true,
                xhrFields:{
                    withCredentials:true
                },
                success:function (data) {
                    if(data.status == 200){
                        combUserBehaviorHTML(data.data);
                    }else{
                        top.toastr.error(data.msg);
                    }
                },
                error:function(data) {
                    top.toastr.error("菜单加载失败，请检查网络");
                }
            })

        }

	function initUser30DayBehavior(){
            var url = 'userBehavior/getSysUserStsDayList';
            jQuery.ajax({
                url:domain + url,
                type:"get",
                data:{},
                crossDomain:true,
                async:true,
                xhrFields:{
                    withCredentials:true
                },
                success:function (data) {
                    if(data.status == 200){
                        combUser30DayBehaviorHTML(data.data);
                    }else{
                        top.toastr.error(data.msg);
                    }
                },
                error:function(data) {
                    top.toastr.error("菜单加载失败，请检查网络");
                }
            })

        }


        function combUserBehaviorHTML(data){
            $("#daySts").find("tbody tr").eq(0).find("td").eq(1).html(data.todayLoginNop);
            $("#daySts").find("tbody tr").eq(1).find("td").eq(1).html(data.todayLoginNot);
            $("#daySts").find("tbody tr").eq(2).find("td").eq(1).html(data.todayNumBehavior);

            $("#daySts").find("tbody tr").eq(0).find("td").eq(3).html(data.yesterdayLoginNop);
            $("#daySts").find("tbody tr").eq(1).find("td").eq(3).html(data.yesterdayLoginNot);
            $("#daySts").find("tbody tr").eq(2).find("td").eq(3).html(data.yesterdayNumBehavior);


            $("#monthSts").find("tbody tr").eq(0).find("td").eq(1).html(data.thisMonthLoginNop);
            $("#monthSts").find("tbody tr").eq(1).find("td").eq(1).html(data.thisMonthLoginNot);
            $("#monthSts").find("tbody tr").eq(2).find("td").eq(1).html(data.thisMonthNumBehavior);

            $("#monthSts").find("tbody tr").eq(0).find("td").eq(3).html(data.lastMonthLoginNop);
            $("#monthSts").find("tbody tr").eq(1).find("td").eq(3).html(data.lastMonthLoginNot);
            $("#monthSts").find("tbody tr").eq(2).find("td").eq(3).html(data.lastMonthNumBehavior);

        }

	function combUser30DayBehaviorHTML(data){
	    let loginNop = [];
	    let loginNot = [];
	    let numBehavior = [];
	    let dateList = [];
	    for(var i=0;i<data.length;i++){
		loginNop.push(data[i].loginNop);
		loginNot.push(data[i].loginNot);
		numBehavior.push(data[i].numBehavior);
		dateList.push(data[i].date);
	    }
	    stsUser30DayChart(dateList,loginNop,loginNot,numBehavior);
	}
	function stsUser30DayChart(dateList, loginNop,loginNot,numBehavior){
	    var chart = Highcharts.chart('stsUserBehaviorChart', {
		title: {
			//text: '近30天系统登录人数，人次，活跃度'
			text: ''
		},
		subtitle: {
			//text: '数据来源：味道日损'
		},
		chart: {
			zoomType: 'xy'
		},
		yAxis: [{
			labels:{	
				style:{
					color: Highcharts.getOptions().colors[1]
				}
			},
			title: {
				text: '活跃度',
				style:{
					color: Highcharts.getOptions().colors[1]
				}
			}
		},{
			labels:{	
				style:{
					color: Highcharts.getOptions().colors[0]
				}
			},
			title: {
				text: '人数/人次',
				style:{
					color: Highcharts.getOptions().colors[0]
				}
			},
			opposite: true
		}],
		xAxis: {
		    categories: dateList,
		    crosshair: true
		},
		tooltip: {
			shared: true
		},
		legend: {
			layout: 'vertical',
			align: 'right',
			verticalAlign: 'bottom',
			backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
		},
                credits:{
                    enabled:false
                },
		series: [{
			name: '登录人数',
			type: 'column',
			data: loginNop,
			yAxis: 1
		}, {
			name: '登录人次',
			data: loginNot,
			type: 'column',
			yAxis: 1
		}, {
			name: '活跃度',
			data: numBehavior,
			type: 'spline'
		}],
	    });
	}
    </script>
</html>
